<template>
	<div class="i_addBanner">
		<h2 class="tit">“{{nickname}}”公众号</h2>		
		<div class="main">
			<p class="title">{{text}}</p>
			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90" class="content">
				<FormItem label="协议名称：" prop="title">
					<Input v-model="formValidate.title" placeholder="请输入协议名称" class="word" maxlength="100"></Input>
				</FormItem>
				<Row>
					<Col span="8">
						<FormItem label="协议类型：" prop="type">
							<Select v-model="formValidate.type" class="select">
								<Option v-for="(item, index) in followList" :value="item.code" :key="index" class="selectitem">{{ item.message }}</Option>
							</Select>
						</FormItem>
						</Col>
						<Col span="6">
						<FormItem label="是否启用：" prop="iclick">
							<iSwitch size="large"  v-model="formValidate.iclick" >
								<span slot="open">开启</span>
								<span slot="close">关闭</span>
							</iSwitch>
						</FormItem>
					</Col>
				</Row>
				<FormItem label="协议内容：" prop="content">
					<vueEditor
						id="editor_id"
						:textHtml="formValidate.content"
						:urlCode="urlCode"
						@valueHandle="afterChange"
						:height='300'
						class="word"
					></vueEditor>
				</FormItem>
				<FormItem class="selectitem">
					<Button type="primary" @click="handleSubmit('formValidate')" class="btn">
						<Icon type="ios-checkmark icon" />保存
					</Button>
					<Button @click="handleReset('formValidate')" class="btn">
						<i class = "iconfont icon-butongyi icon"></i>取消
					</Button>
				</FormItem>
			</Form>
		</div>
	</div>
</template>

<script>
import tmpHeader from "../tmpHeader";
import api from "@/api/commonApi";
import code from "@/configs/base.js";
import vueEditor from "@/components/vueEditor";
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store"
export default {
	components: {
		tmpHeader,
		vueEditor
	},
	data() {
		return {
			text:'',
			id: "",
			formValidate: {
			content : "",
			title : "",
			id : "",
			type : null,
			iclick: false,
			nick: ''
			},
			ruleValidate:{
			title: [{ required: true, message: '请输入协议标题', trigger: 'blur' }],
			content: [{ required: true, message: '请输入协议内容', trigger: 'blur' }],
			type: [{ required: true, message: '请输入协议类型', trigger: 'change' ,type:'number' }],
			iclick: [{ required: true, message: '请选择是否启用', trigger: 'change',type:'boolean'}]
			},
			urlCode: '{"urlCode":"' + code.urlCode.richText + '"}',
			followList:[],
			nickname: ''
		};
	},
	created() {
		this.nickname = localStorage.getItem("nick");
		this.text = this.$route.query.txt
		if(this.text == '协议文案编辑'){
			this.gettext()
		}
		this.getwxTypeEnums()
		let iv = store.state.iv;
		let salt = store.state.salt;
		this.appid = aesUtils.decrypt(salt,iv,"wxAppid",localStorage.getItem("appid"))
		let breadList = [
			{ path: "/index", title: "首页" },
			{
				path: "/index/publicOperation/publicAddress/home",
				title: "公众号托管"
			},
			{
				path: "/index/publicOperation/publicAddress/home",
				title: "公众号运营"
			}
		];
		this.$emit("changeBreadList", breadList);
	},
	methods: {
		//获取编辑信息
		gettext(){
			this.$axios.post(api.findWxProtocolById,{id:this.$route.query.id}).then(res => {
				if(res.data.success) {
					let ret = res.data.object;
					this.formValidate.content = ret.protocol
					this.formValidate.title = ret.protocolName
					this.formValidate.id = ret.id
					this.formValidate.type = ret.protocolType
					if(ret.protocolStatus == 1){
						this.formValidate.iclick = true
					}else{
						this.formValidate.iclick = false
					}
				} else {
					this.$Message.error('加载协议详情失败')
				}
			})
		},
		//获取协议类型
		getwxTypeEnums(){
			this.$axios.post(api.findWxProtocolType,{}).then(res => {
				if(res.data.code == 1){
					this.followList = res.data.object
				}else{
					this.$Message.error('获取协议类型失败')
				}
			})
		},
		afterChange(val) {
			this.formValidate.content = val;
		},
		// 后退
		handleReset (name) {
			this.modalStatus = false;
			this.$refs[name].resetFields();
			this.formValidate.content = ''
			this.formValidate.title = ''
			this.formValidate.id = ''
			this.formValidate.type = ''
			let pageNo = this.$route.query.pageNo;
			this.functionJS.queryNavgationTo(this, "/index/publicOperation/publicAddress/protocol/list", {pageNo});
		},
		// 保存按钮
		handleSubmit (name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					let url = api.saveWxProtocol;
					let iclickstatus
					if(this.formValidate.iclick == false){
						iclickstatus = 0
					}else{
						iclickstatus = 1
					}
					let params = {
						appid: this.appid,
						protocolStatus:iclickstatus,
						protocol: this.formValidate.content,
						protocolName: this.formValidate.title,
						protocolType: this.formValidate.type,
					}               
					if(Boolean(this.formValidate.id)) {
						params.id = this.formValidate.id
					} 
					this.$axios.post(url, params).then(res => {
						if(res.data.success) {
						this.handleReset('formValidate')
						this.$Message.success('保存成功')
						} else {
						this.$Message.error(res.data.message)
						}
					})
				} else {
					this.$Message.error('请完整填写必填项!');
				}
			})
		},
	},
};
</script>

<style scoped lang="less">
.i_addBanner {
	width: calc(100%);
	padding: 10px 0px;
	margin: 0 auto;
	background: #fff;
	.tit {
		margin: 15px 0;
		font-weight: bold;
		text-align: center;
		color: #333
	}
	.main {
		margin: 20px;
		margin-bottom: 20px;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		.title {
			font-size: 18px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
		}
		.content {
			width: 98%;
			margin: 0 auto;
			.select {
				width: 200px;
			}
			.selectitem {
				text-align: center;
			}
			.word {
				margin: 0;
				width: 99%
			}
			.icon{
				font-size: 14px;
				margin-right: 5px;
			}
			.btn {
				margin-left: 10px;
				width: 75px;
				height: 35px;
			}
		}
	}
}
</style>